import { DeleteOutlined } from '@ant-design/icons';
import React from 'react';

import styles from './index.module.less';
import { ToBeSavedProps } from './interface';

const ToBeSaved = ({
  toBeSavedList,
  removeToBeSavedItem
}: ToBeSavedProps): JSX.Element => {
  return (
    <>
      <h1 className={styles['content-title']}>
        To be saved{' '}
        <span className={styles['content-number']}>
          ({toBeSavedList.length})
        </span>
      </h1>
      <div className={styles['image-list']}>
        {(toBeSavedList || []).map((image, index) => {
          return (
            <div
              key={index}
              className={`
            ${styles['image-item']}`}
            >
              <div className={styles['img-container']}>
                {image.width >= image.height ? (
                  <img src={image.src} alt={image.name} width="86px" />
                ) : (
                  <img src={image.src} alt={image.name} height="86px" />
                )}
                <div className={styles['hover-cover']}>
                  <DeleteOutlined
                    style={{
                      fontSize: '16px',
                      height: '16px',
                      color: '#FFFFFF',
                      cursor: 'pointer'
                    }}
                    onClick={(): void => {
                      removeToBeSavedItem(index);
                    }}
                  />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default ToBeSaved;
